import React, {Component} from 'react';
import {View, Text, StyleSheet, Image, TouchableOpacity} from 'react-native';
import PropTypes from 'prop-types';
import {LinearButton} from '../../../components/Button';
import {CachedImage} from 'react-native-img-cache';

const styles = StyleSheet.create({
  container: {
    height: 100,
    paddingLeft: 20,
    paddingRight: 20,
    paddingBottom: 0,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  descrptionText: {
    color: 'black',
    textAlign: 'left',
  },
  buyButoon: {
    borderColor: 'rgba(66,66,66,1)',
    backgroundColor: '#FFCB26',
    width: 100,
    height: 40,
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: 20,
  },
});

export default class UserPriceCell extends Component {
  static propTypes = {
    price: PropTypes.object,
    onPress: PropTypes.func,
    swapSymbol: PropTypes.string,
  };

  render() {
    let {value, user, userImg, itemName, payCoin} = this.props.price;
    let {onPress} = this.props;
    console.log(this.props.price);
    return (
      <TouchableOpacity onPress={onPress} style={styles.container}>
        <CachedImage
          source={{uri: userImg}}
          style={{
            width: 66,
            height: 66,
            borderRadius: 33,
            backgroundColor: 'lightGray',
            marginRight: 20,
            backgroundColor: 'rgba(220,220,220,1)',
          }}></CachedImage>
        <View
          style={{
            flex: 1,
            height: '100%',
            flexDirection: 'column',
            justifyContent: 'center',
          }}>
          <Text style={{color: 'white'}}>{user}</Text>
          <View
            style={{
              flexDirection: 'row',
              marginLeft: 0,
              alignItems: 'flex-end',
            }}>
            <Text
              style={{
                color: 'white',
                fontSize: 12,
                marginBottom: 4,
                marginLeft: 0,
              }}>
              {`${itemName}`}
            </Text>
          </View>
          <Text
            style={{
              color: 'white',
              fontSize: 13,
            }}>
            {`${value} ${payCoin}`}
          </Text>
        </View>
      </TouchableOpacity>
    );
  }
}
